<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>剪切板</title>
  <style>
    #editor {
      width: 500px;
      height: 500px;
      border: 1px solid black;
      border-radius: 4px;
      outline: none;
      padding: 3px;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div contenteditable="true" id="editor"></div>
  <div id="clipAction">
    <button data-key="paste">Paste</button>
    <button data-key="copy">Copy</button>
    <button data-key="cut">Cut</button>
    <button data-key="copyAnyThing">copyAnyThing</button>
  </div>
  <button id="queryPermission">查询权限</button>
  <script>
    const $ = (s) => document.querySelector(s);
    const editor = $("#editor");
    const copySelection = () => {
      const selectedText = getSelection().toString();
      if (!selectedText) {
        return;
      }
      navigator.clipboard.writeText(selectedText);
    };
    const clearEditor = () => {
      editor.innerText = "";
    };

    async function readClipboard() {
      try {
        const clipboardItems = await navigator.clipboard.read();
        for (const clipboardItem of clipboardItems) {
          for (const type of clipboardItem.types) {
            const blob = await clipboardItem.getType(type);
            const url = URL.createObjectURL(blob);
            console.log(url);
            console.log(await blob.text());
          }
        }
      } catch (e) {
        console.log("读取剪切板失败");
      }
    }
    async function writeTextToClipboard(text) {
      try {
        await navigator.clipboard.writeText(text);
        //写入完成后做一些事情....
      } catch (e) {
        console.log("写入剪切板失败");
      }
    }
    async function writeToClipboard() {
      try {
        const record = {};

        //写入纯文本
        const text = "helloworld";
        const textPlain = "text/plain";
        const textBlob = new Blob([text], { type: textPlain });
        record[textPlain] = textBlob;

        //写入html片段
        const html = `<h1>HelloWorld</h1>`;
        const textHtml = "text/html";
        const hmtlBlob = new Blob([html], { type: textHtml });
        record[textHtml] = hmtlBlob;

        //写入图片
        const data = await fetch("[图片url]");
        const blob = await data.blob();
        record[blob.type] = blob;

        const clipboardItems = [new ClipboardItem(record)]
        navigator.clipboard.write(clipboardItems);
      } catch (e) {
        console.log("复制失败");
      }
    }
    $("#clipAction").addEventListener("click", async function (event) {
      const action = event.target.dataset.key;
      if (action === "paste") {
        readClipboard();
      } else if (action === "copy") {
        copySelection();
      } else if (action === "cut") {
        copySelection();
        clearEditor();
      } else if (action === "copyAnyThing") {
        writeToClipboard();
      }
    });
    editor.addEventListener("paste", function (e) {
      e.preventDefault();
      debugger;
      navigator.clipboard.read(["text/html"]).then((cb) => {
        debugger;
      });
    });
  </script>
</body>

</html>